<template>
  <van-tabbar v-model="active" class="tab-container">
    <van-tabbar-item v-for="(item,index) in tabbars" :key="index" @click="tab(index,item.name)">
      <span :class="currIndex == index ? active:''">{{item.title}}</span>
      <template slot="icon" slot-scope="props">
        <img :src="props.active ? item.active : item.normal" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'tabbar',
  data () {
    return {
      currIndex: 0,
      active: 0,
      tabbars: [
        {
          name: 'home',
          title: '首页',
          normal: '/img/home.png',
          active: '/img/home_ac.png'
        },
        {
          name: 'category',
          title: '分类',
          normal: '/img/category.png',
          active: '/img/category_ac.png'
        },
        {
          name: 'cart',
          title: '购物车',
          normal: '/img/cart.png',
          active: '/img/cart_ac.png'
        },
        {
          name: 'mine',
          title: '我的',
          normal: '/img/mine.png',
          active: '/img/mine_ac.png'
        }
      ]
    }
  },
  methods: {
    tab (index, val) {
      this.currIndex = index
      this.$router.push({ name: val })
    }
  }
}
</script>
<style lang="less" scoped>
.tab-container img {
  width: 26px;
  height: 26px;
}

.van-tabbar-item--active {
  color: #e10f02;
}
</style>
